<template>
  <div class="about">
    <h1 :class="classes.red">This is an about page</h1>
    <div :class="$style.divgreen" class="divgreen-width divgreen-width1">
      {{ per }}
    </div>
    <n-space vertical>
      <n-input v-model:value="value" type="text" placeholder="基本的 Input" />
      <n-input
        v-model:value="value"
        type="textarea"
        placeholder="基本的 Textarea"
      />
    </n-space>
    <div class="parent bg-green-600" style="grid-auto-rows: minmax(100px, auto)">
      <div class="div1 bg-purple-50">1</div>
      <div class="div2 bg-purple-100">2</div>
      <div class="div3 bg-purple-200">3</div>
      <div class="div4 bg-purple-300">4</div>
      <div class="div5 bg-purple-400">5</div>
      <div class="div6 bg-pink-50">6</div>
      <div class="div7 bg-pink-100">7</div>
      <div class="div8 bg-pink-200">8</div>
      <div class="div9 bg-pink-300">9</div>
      <div class="div10 bg-pink-400">10</div>
      <div class="div11 bg-pink-500">11</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCssModule, ref, onMounted } from "vue";
import { Options } from "vue-class-component";
const cssMoudle1 = useCssModule();
const cssMoudle2 = useCssModule("classes");
console.log(cssMoudle1, cssMoudle2);
const value = ref(null);

const width = "300px";
const width1 = "10px";

interface Person {
  name: string;
  age?: number;
  gender?: string;
  [propName: string]: any;
}

const per: Person = {
  name: "qeqwe",
  age: 12,
  face: "mid",
};

function sum(x: number, y: number): number {
  return x + y;
}

const mySum: (x: number, y: number) => number = (x, y) => {
  return x + y;
};
/*                           输入类型 => 输出类型                    */
const mySum1: (x: number, y: number) => number = function(x, y) {
  return x + y;
};

interface Func {
  (source: string, subStr: string): boolean;
}

let myFunc: Func = function(source: string, subStr: string) {
  return false;
};

/*
  const timeFromDate: (arg0: Date) => any = (date: Date) => {
    console.log('date', date)
    console.log('timeFromDate', date.toTimeString())
    return date.toTimeString().slice(0, 8)
  }
 */
const timeFromDate = (date: Date) => {
  console.log("date", date);
  console.log("timeFromDate", date.toTimeString());
  return date.toTimeString().slice(0, 8);
};

console.log(timeFromDate(new Date()));

function reverse(arg0: string): string;
function reverse(arg0: number): number;
function reverse(arg0: number | string): number | string | void {
  if (typeof arg0 === "number") {
    return Number(
      arg0
        .toString()
        .split("")
        .reverse()
        .join("")
    );
  } else if (typeof arg0 === "string") {
    return arg0
      .split("")
      .reverse()
      .join("");
  }
}

onMounted(() => {
  const value0 = reverse(123456);
  const value1 = reverse("123456abc");
  console.log("reverse", value0, value1);
  fetch("http://localhost:2000/config", { method: "GET" }).then((res) => {
    console.log("fetch", res);
  });
});
</script>

<style module>
.divgreen {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(#9eccab, #fca106);
  border-radius: 10px;
}

.divgreen-width {
  width: v-bind("width");
}
</style>

<style module="classes">
.red {
  color: #9eccab;
}
</style>

<style>
.divgreen-width1 {
  border-radius: v-bind("width1");
}
.divgreen-width {
  width: v-bind("width");
}

.parent {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  /* grid-auto-rows: minmax(0, auto); */
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
}
.div2 {
  grid-area: 3 / 1 / 6 / 2;
}
.div3 {
  grid-area: 1 / 3 / 2 / 5;
}
.div4 {
  grid-area: 2 / 3 / 3 / 5;
}
.div5 {
  grid-area: 1 / 5 / 2 / 6;
}
.div6 {
  grid-area: 2 / 5 / 3 / 6;
}
.div7 {
  grid-area: 3 / 2 / 4 / 5;
}
.div8 {
  grid-area: 4 / 3 / 5 / 5;
}
.div9 {
  grid-area: 4 / 2 / 6 / 3;
}
.div10 {
  grid-area: 5 / 3 / 6 / 6;
}
.div11 {
  grid-area: 3 / 5 / 5 / 6;
}
</style>
